<template>
  <div class="home">
    <!--{{$route.params}}-->
    <Header :nameId="$route.params.fenleiTabId" class="heanderNav"></Header>
    <group class="from_box" ref="rules">
      <x-input title="用户名" label-width="80px" v-model="registerForm.userName" required :is-type="checkUserName"   placeholder="请输入用户名"></x-input>
      <x-input title="昵称" label-width="80px" v-model="registerForm.userNickname" required placeholder="请输入昵称"></x-input>
      <x-input title="密码" type="password" label-width="80px" v-model="registerForm.userPwd" required placeholder="请输入密码"></x-input>
      <x-input title="重复密码" type="password" label-width="80px" v-model="resPwd" required placeholder="请再次输入密码"></x-input>
      <x-input title="邮箱" label-width="80px" v-model="registerForm.userEmail" is-type="email" required placeholder="请输入邮箱"></x-input>
      <radio title="性别" :options="sexOptions" v-model="registerForm.userSex" ></radio>
    </group>
    <div class="register_box">
      <x-button type="warn" text="注册" class="register" @click.native="regist()"></x-button>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '@/components/commons/header/header.vue'
import Footer from '@/components/commons/footer/footer'
import userController from '@/api/userController/index'
export default {
  name: 'register',
  data () {
    return {
      registerForm: {
        userName: null,
        userNickname: null,
        userPwd: null,
        userEmail: null,
        userSex: 0
      },
      sexOptions: [{
        key: 0,
        value: '男'
      }, {
        key: 1,
        value: '女'
      }],
      resPwd: null
    }
  },
  components: {Header, Footer},
  methods: {
    checkUserName (value) {
      if (value.length > 11) {
        return {
          valid: false,
          msg: '用户名必须小于11'
        }
      } return {valid: true}
    },
    regist () {
      //检验空
      if(!this.registerForm.userName){
        this.$vux.toast.show({
          text: '用户名不能为空',
          type:'warn'
        })
        return false
      }
      if(this.registerForm.userName.length>11){
        this.$vux.toast.show({
          text: '用户名必须小于11个字符',
          type:'warn'
        })
        return false
      }
      if(!this.registerForm.userNickname){
        this.$vux.toast.show({
          text: '昵称不能为空',
          type:'warn'
        })
        return false
      }
      if(!this.registerForm.userPwd){
        this.$vux.toast.show({
          text: '密码不能为空',
          type:'warn'
        })
        return false
      }
      if(this.registerForm.userPwd!=this.resPwd){
        this.$vux.toast.show({
          text: '两次输入密码不一致',
          type:'warn'
        })
        return false
      }     
      if(!this.registerForm.userEmail){
        this.$vux.toast.show({
          text: '邮箱不能为空',
          type:'warn'
        })
        return false
      }   
      var reg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
      if(!reg.test(this.registerForm.userEmail)){
          this.$vux.toast.show({
            text: '邮箱格式不正确',
            type:'warn'
          })
        return false
      }                 
      //验证用户名
      userController.checkUsername({userName:this.registerForm.userName}).then(response=>{
        if(!response.data.success){
           this.$vux.toast.show({
            text: '用户名已存在',
            type:'warn'
          })
          return false
        }else{
          //验证邮箱
          userController.checkEamil({userEmail:this.registerForm.userEmail}).then(response=>{
            if(!response.data.success){
              this.$vux.toast.show({
                text: '邮箱已被注册',
                type:'warn'
              })
              return false
            }else{
              userController.register(this.registerForm).then(response=>{
                if(response.success){ //注册成功，跳转至登录页面
                   this.$router.push({name:'login',params: this.registerForm})
                }else{
                  this.$vux.toast.show({
                    text: response.msg,
                    type:'warn'
                  })
                }
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>
  .from_box{
    padding:25px 0;
    background: #fff;
  }

  .register_box{
    padding:0 5px;
  }
  .register{
    margin-top:15px;
    background: #f60;
  }
</style>
